<template>
  <div v-loading="loading">
    <div style="border: #efefef solid 1px; height: calc(100vh - 100px);width: 100%;">
      <relation-graph ref="relationGraph$" :options="options" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import RelationGraph from 'relation-graph/vue3'
const relationGraph$ = ref<RelationGraph>()
const options = {
  // defaultExpandHolderPosition: 'right', // 展开收起
  allowShowMiniToolBar: false, // 是否显示工具栏
  disableDragNode: true, // 是否禁用图谱中节点的拖动
  disableZoom: false, // 是否禁用图谱的缩放功能
  moveToCenterWhenRefresh: true, // 当图谱刷新后（调用setJsonData或refresh方法都会触发），让图谱根据节点居中（图片会默认将根节点作为中心展示，此选项会根据节点分布寻找中心）
  useAnimationWhenRefresh: false, // 当图谱刷新后（调用setJsonData或refresh方法都会触发），使用动画让图居中、缩放
  defaultFocusRootNode: false, // 默认为根节点添加一个被选中的样式
  defaultLineWidth: 2,
  defaultNodeBorderWidth: 0,
  debug: false
  // defaultLineMarker
}
const loading = ref(false)
onMounted(() => {
  const jsonData = {
    rootId: 'a',
    nodes: [
      { id: 'a', text: 'a', color: 'red' },
      { id: 'b', text: 'b', },
      { id: 'c', text: 'c', },
      { id: 'd', text: 'd', },
      { id: 'e', text: 'e', },
      { id: 'f', text: 'f', },
    ],
    lines: [
      { from: 'a', to: 'b', text: '影响', isHideArrow: true },
      { from: 'a', to: 'c', text: '影响' },
      { from: 'a', to: 'd', text: '影响' },
      { from: 'a', to: 'e', text: '影响' },
      { from: 'a', to: 'f', text: '影响' },
    ],
  }
  loading.value = true
  relationGraph$.value?.setJsonData(jsonData)
  setTimeout(() => {
    loading.value = false
  }, 400)
})
</script>